<template>
  <sun1 />
  <div>
   num1:<input v-model.number="num1" style="width:100px" />
 <br />
 num2:<input v-model.number="num2" style="width:100px" />
 </div>
 <span>加法等于:{{ addNum }}</span>
<div>
  <el-button @click="getViewportSize">获取屏幕大小</el-button>
  <p>宽：{{data.width}}高：{{data.height}}</p>
  <button :disabled="count!=0" @click="countDown(60,sendCode)">倒计时 {{ count || '' }} </button>
<button @click="debounceClick">防抖点击</button>
</div>
<div style="height:1500px">
  <h1>{{viewInfo.width}}<br>{{viewInfo.height}}</h1>
  <h1>滚动：{{scrollTop}}</h1>
  <div
    ref="draggableDiv"
    class="it-layout-aside"
  >古德古德～</div>
</div>
</template>

<script setup>
import {inject,ref} from 'vue'
import {useAdd,useVwSize,useCountDown,useDebounce,useScroll,useReSize,useDraggable  } from '@/common/hooks.ts'     //引入自动hook 
import sun1 from './sun1.vue'
console.log(inject('msf'))
const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
const {data,getViewportSize}=useVwSize()

const { count, countDown } = useCountDown();
const sendCode = () => {
  console.log("发送验证码");
};
const { debounce } = useDebounce()
const fn = () => {
   console.log('点击了哈');
}
const debounceClick =  debounce(fn,1000)
const { scrollTop }  = useScroll()
const {viewInfo}=useReSize()
const draggableDiv = useDraggable()
</script>

<style>
.it-layout-aside{
  position: fixed;
  left:100px;
  top:300px;
  cursor: move;
  border: 1px solid #ccc;
}
</style>